<template>
  <div id="tooltip-panel">
    <div class="container popup-shadow" v-if="isPopupContent">
      <div class="title">
        {{title}}
      </div>
      <div class="content" id="popup-content"></div>
    </div>
    <div class="container popup-shadow" v-else>
      <div class="content">
        <component :is="components.get(component)" :data="tooltipData"></component>
      </div>
    </div>
    <div class="popup-pointer popup-aligned-top-center ">
      <div class="popup-pointer-direction popup-shadow " id="popup-arrow"/>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import {map} from "cesium-boost";
  import {components} from "./index";

  import {onMounted, ref} from "vue"
  import {ReactivePopup, ReactiveTooltip} from "@/lib/cesium/widgets/popup/reactive/ReactivePopup";

  let tooltip: ReactiveTooltip;
  const isLocation = ref(true);
  const isPopupContent = ref(true);
  const title = ref('');
  let component = ''

  const tooltipData = ref()

  onMounted(() => {
    let elementById = document.getElementById('tooltip-panel') as HTMLElement;
    map.viewerPromise.then(() => {
      // isLocation.value = popup.isLocation
      tooltip = map.tooltip as ReactiveTooltip
      tooltip.setContainer(elementById)
      tooltip.onNewData((data: any) => {
        tooltipData.value = data
      })
      tooltip.onNewPopupContent((data: any) => {
        isPopupContent.value = true
        title.value = data.title
        let content = elementById.querySelector('.container') as HTMLElement;
        (content.children[1] as HTMLElement).innerHTML = data.content;
      })
    })
  })


</script>

<style scoped lang="scss">
  #tooltip-panel {
    position: absolute;
    left: 10px;
    top: 10px;

    .container {
      min-width: 200px;
      font-size: 14px;
      padding-right: 10px;
      background: #0b3879;
      /*border: 1px solid #225aaa;*/
      position: relative;
      z-index: 1;
      color: #d4e4fa;

      .content {
        width: 100%;
        margin-top: 5px;
        text-align: left;
        line-height: 25px;

        .item {
          vertical-align: middle;
          height: 28px;
          line-height: 28px;
          text-align: left;
          padding-left: 10px;
          font-size: 14px;

          .label {
            box-sizing: border-box;
            min-width: 80px;
            display: inline-block;
          }

          .value {
            display: inline-block;
            margin-left: 5px;
            box-sizing: border-box;
          }
        }
      }
    }

    .popup-pointer {
      position: absolute;
      width: 0;
      height: 0;
      pointer-events: none;
    }

    .popup-pointer-direction {
      top: -6px;
      left: 6px;
      background: #0b3879;
      content: "";
      position: absolute;
      width: 12px;
      height: 12px;
      transform: scale(0.75, 2) rotate(45deg)
    }

    .popup-aligned-top-center {
      top: 100%;
      left: 50%;
      margin: 0 0 0 -12px;
    }

    .popup-shadow {
      box-shadow: 0 1px 4px rgb(0 0 0 / 80%);
    }
  }
</style>
